<template>
<div id="out18">
    <div class="back"></div>
    
      <div class="shoppp">
      	<img class="duihaoo" src="../assets/img/fenlei/dui.png" alt=""/>
      	<img src="../assets/img/shouye/2zeidianji/huihuxisihuafenmi.png" alt=""/>
      	<div>
      		<a href="#/MyDingdanXq">
      		<p class="title">会呼吸丝滑蜜粉</p>
      		<p>规格：蜜粉</p>
      		<p class="price">￥166.06 <span>x1件</span></p>
      		</a>
      	</div>
      </div>
       
      <p class="bottom">实付：<span class="price">￥166.06</span><span class="price daoJis">倒计时：<span>03</span>:<span>02</span>:<span>59</span></span><span class="btn">去付款</span></p>
      <div class="bot">
      	<img class="duihaoo" src="../assets/img/fenlei/dui.png" alt=""/>
      	全选
      	<span>删除</span>
      </div>
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
				var h1=3;
				var m1=2;
				var s1=59;
				$("#out14 .dingdan span").text("待支付");
				setInterval(jiShis,1000);
				function jiShis(){
					s1--;
					if (s1<=0) {
						m1--;
						s1=59;
					};
					if (m1<=0) {
						h1--;
						m1=59;
					};
					if (h1<=0) {
						$("#out16 .daoJis").fadeOut(500,function(){
							$(this).remove();
						});
					};
					$("#out18 .daoJis>span").eq(0).text("0"+h1);
					$("#out18 .daoJis>span").eq(1).text(m1>=10?m1:"0"+m1);
					$("#out18 .daoJis>span").eq(2).text(s1>=10?s1:"0"+s1);
				};
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
#out18{
		height: 100vh;
		background: #f2f2f2;
	}
	#out18 a{
		text-decoration: none;
		color: #000000;
	}
	#out18 .shoppp{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 20rem;
		background: #FFFFFF;
	}
	#out18 .shoppp>img{
		width: 8.6rem;
		height: 10rem;
	}
	#out18 .shoppp>div{
		font-size: 2.4rem;
		color: #666666;
		margin-left: 9rem;
		padding-right: 16rem;
	}
	#out18 .shoppp>div .title{
		font-size: 2.8rem;
		margin-bottom: 3rem;
	}
	#out18 .shoppp>div .price{
		margin-top: 4rem;
		color: #FF0000;
	}
	#out18 .shoppp>div .price>span{
		color: #808080;
		padding-left: 4rem;
	}
	#out18>.bottom{
		font-size: 2.8rem;
		background: #FFFFFF;
		padding: 2rem;
	}
	#out18>.bottom>.price{
		font-size: 3rem;
		color: #FF0000;
	}
	#out18>.bottom>.daoJis{
		padding-left: 10rem;
		font-size: 2.4rem;
	}
	#out18>.bottom>.btn{
		float: right;
		width: 12rem;
		height: 4rem;
		background-color: #e53e42;
		color: #ffffff;
		border-radius: 2rem;
		text-align: center;
		line-height: 4rem;
		transform: translateY(-0.5rem);
	}
	#out18>.bot{
		font-size: 3rem;
		background: #FFFFFF;
		padding: 2rem;
		position: fixed;
		bottom: 0;
		width: 100vw;
		border-top: 0.1rem solid #CCCCCC;
		box-sizing: border-box;
		display: none;
	}
	#out18>.bot>span{
		float: right;
		width: 12rem;
		height: 4rem;
		background: #FF0000;
		border-radius: 2rem;
		text-align: center;
		line-height: 4rem;
		color: #FFFFFF;
	}
	#out18>.bot>img{
		width: 3rem;
		height: 3rem;
		float: left;
		margin-right: 2rem;
	}
	#out18 .shoppp>img:first-child{
		width: 3rem;
		height: 3rem;
		margin-right: 10rem;
		display: none;
	}
	#out18 .duihaoo{
		filter: grayscale(100%);
	}
</style>